<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/swiper.min.css">
	<style>
		body{
			margin: 0;
			padding: 0;
		}
		.swiper-container{
			width: 500px;
			height: 300px;
			margin: 20px auto;
			border: 1px solid #ccc;
		}
		.swiper-slide{
			text-align: center;
			background-color: #f00;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	</style>
</head>
<body>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">第1页</div>
			<div class="swiper-slide">第2页</div>
			<div class="swiper-slide">第3页</div>
			<div class="swiper-slide">第4页</div>
			<div class="swiper-slide">第5页</div>
		</div>
		<div class="swiper-pagination"></div>
	</div>
	<script src="js/jquery-1.10.1.min.js"></script>
	<script src="js/swiper.jquery.min.js"></script>
	<script>
		var mySwiper=new Swiper(".swiper-container",{
			pagination:".swiper-pagination",
			paginationClickable:true,

			onInit:function(swiper){
				console.log("Slide初始化了");
			},
			onclick:function(swiper,event){
				console.log("点击Slide");
			},
			onTap: function (swiper, e) {
                console.log('触碰Slide');
            },
            onDoubleTap: function (swiper, e) {
                console.log('两次触碰Slide，类似于双击');
            },
            onSliderMove: function (swiper, e) {
                console.log('Slide移动了');
            },
            onSlideChangeStart: function (swiper) {
                console.log('Slide切换开始');
            },
            onSlideChangeEnd: function (swiper) {
                console.log('Slide切换结束');
            },
            onTransitionStart: function (swiper) {
                console.log('过渡开始');
            },
            onTransitionEnd: function (swiper) {
                console.log('过渡结束');
            },
            onReachBeginning: function (swiper) {
                console.log('切换到第一个Slide了');
            },
            onReachEnd: function (swiper) {
                console.log('切换到最后一个Slide了');
            }

		});
	</script>
</body>
</html>